<template>
    <div>
        <van-list class="cinemaslist nowplayinglist"
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的~"
        @load="onLoad"
        :immediate-check="false">
            <van-cell v-for="data in nowPlayingList" :key="data.filmId" @click="handleDetails(data.filmId)" class="nowplayingItem">
                <div class="nowplayingfilm">
                    <div><img :src="data.poster" alt=""></div>
                    <div class="nowplayingfilm-info">
                        <span class="filmname">{{ data.name }}</span>
                        <span class="filmactors">
                            主演：
                            <span :class="data.actors ? '' : 'onactors'">{{ handleActors(data.actors) }}</span>
                            <span :class="data.actors ? 'onactors' : ''">暂无主演</span>
                        </span>
                        <span>{{ data.nation }} | {{ data.runtime }}分钟</span>
                        <!-- <span>{{ data.filmId }}</span> -->
                    </div>
                    <div class="nowplayingfilm-buy">
                        <div class="nowplayingfilm-buy-box">购票</div>
                    </div>
                </div>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
import http from '@/util/http'
import { createApp } from 'vue';
import { List } from 'vant';

const app = createApp();
app.use(List);

export default {
    data(){
        return {
            nowPlayingList: [],
            loading: false,
            finished: false,
            pageNum: 1,
            total: 0,
        }
    },
    mounted(){
        http({
            url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=2&k=772290`,
            headers: {
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then(res => {
            this.nowPlayingList = res.data.data.films
            this.total = res.data.data.total
        })   
    },
    methods: {
        handleActors(data){
            return data.map(item => item.name).join(' ')
        },
        handleDetails (data) {
            // console.log(data)
            this.$router.push({
                path: `/Detail/${data}`,
                params: {
                filmId: data
                }
            })
        },
        onLoad () {
            // if(this.loading) return
            // console.log('到底了')
            ++this.pageNum
            if (this.nowPlayingList.length == this.total && this.total !== 0) return this.finished = true // 当已加载的数组长度等于总长度，时，完成加载。
            fetch(`https://m.maizuo.com/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.pageNum}&pageSize=10&type=1&k=772290`, {
                headers: {
                'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => res.json()).then(res => {
                if (res.data.films.length == false) return this.finished = true
                // console.log(this.nowPlayingList)
                this.nowPlayingList = [...this.nowPlayingList,...res.data.films]
                this.loading = false
                // console.log(this.nowPlayingList)
            })
        }
    },

}
</script>
<style lang="scss" scoped>
// .box{
//     height: 500px;
//     overflow: hidden;
//     position: relative;
// }
.nowplayinglist {
    
    .nowplayingItem {
        width: 100%;
        height: 130px;
        padding: 15px 15px 0px 0px;
        overflow: hidden;
        line-height: 20px;
        .nowplayingfilm {
            display: flex;
        }
    }

    img {
        width: 66px;
        height: 94px;
        float: left;
    }

    .nowplayingfilm-info {
        color: gray;
        text-align: left;

        .filmname {
            font-size: 16px;
            margin: 5px 0;
            color: black;
        }
        .filmactors {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .onactors {
                display: none;
            }
        }

        // float: left;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        font-size: 13px;
        width: 200px;
    }

    .nowplayingfilm-buy {
        line-height: 25px;
        float: right;
        height: 25px;
        width: 50px;
        color: #ff5f16;
        font-size: 13px;
        text-align: center;
        border-radius: 2px;
        // z-index: 100;
        position: relative;

        .nowplayingfilm-buy-box {
            border: 1px solid #ff5f16;
            position: relative;
            // right: 0px;
            top: 100%;
            white-space: nowrap;
            z-index: 0;

        }
    }
}
</style>
